<template>
  <div>
      <ul>
          <li v-for="post in posts" :key="post.id">
              <div @click="goTo(post.link)">

                <h3>{{ post.title }}</h3>
                <el-tag type="info">{{ post.date }}</el-tag>
                <span>{{ post.abstract }}</span>
                <!-- <router-link :to="{ name: 'postDetail', query: { id: post.id, title: post.title, content: post.content } }">查看详情</router-link> -->
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
  import { getPosts } from '../api/api'

  export default {
  name: 'Posts',
  data() {
      return {
        posts: []
    }
  },
  methods: {
    goTo(post_link) {
      console.log(post_link)
      // 跳转到 post_link
      window.location.href = post_link
    }
  },
  created() {
    getPosts().then((response) => {
        this.posts = response.data
      }
    )
  }
}
</script>

<style scoped>
  li {
    list-style: none;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  h3 {
    margin: 0;
    font-size: 1.5em;
  }
</style>
